import React from "react";
import { Route, Link, Switch, Redirect } from "react-router-dom";
import "./Content.css";
import Home from "./Home";
import Detail from "./Detail";

const New = (props) => {
    console.log(props);
    return <h1>新手入门</h1>;
};
const API = () => <h1>API</h1>;
const Login = () => <h1>登录</h1>;
const Collect = () => <h1>收藏页面</h1>;
const User = (props) => {
    console.log(props);
    return <h1>用户详情页---{props.match.params.username}</h1>;
    // props.match.params.username 拿到的是一个动态路由
};

const PrivateRoute = ({ component: Component, ...rest }) => {
    return (
        <Route
            {...rest}
            render={(props) => {
                if (!localStorage.getItem("isLogin")) {
                    props.history.push("/login");
                }
                return <Component />;
                // 将组件呈现出来
            }}
        />
    );
};
// const PrivateRoute = ({ path, component: Component }) => {
//     return (
//         <Route
//             path={path}
//             render={(props) => {
//                 if (!localStorage.getItem("isLogin")) {
//                     props.history.push("/login");
//                 }
//                 return <Component />;
//                 // 将组件呈现出来
//             }}
//         />
//     );
// };

const Content = () => {
    return (
        <div className="content-wrap">
            <div className="content">
                <div className="left">
                    {/* 从前到后匹配，动态路由一定要放在最后 */}
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/home" component={Home} />
                        {/* exact指严格模式 */}

                        {/*  <Route path="/">
                            <Home />
                        </Route>*/}

                        <Route path="/detail/:id" component={Detail} />
                        {/* <Route path="/" component={Detail} /> */}

                        {/* 单标签模式可以通过属性来获取想要的值
                        ，双标签是直接调用，没有属性值 */}

                        <Route path="/new">
                            <New />
                        </Route>

                        <Route path="/api">
                            <API />
                        </Route>

                        <Route path="/login">
                            <Login />
                        </Route>

                        <PrivateRoute
                            path="/collect"
                            component={Collect}
                            // render里面可以直接拿到history值
                        />
                        <Route path="/user" render={() => <h1>个人中心页</h1>} />

                        {/* 保证固定的在最后 */}
                        {/* /:参数 : 动态路由模式 */}
                        <Route path="/:username" component={User} />
                        {/* <Redirect to='/home'/> */}

                        <Route render={() => <h1>您访问的页面不存在</h1>} />
                    </Switch>
                </div>
                <div className="right"></div>
            </div>
        </div>
    );
};

export default Content;
